<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2650698_5xqmblfcp1m.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/goodsList.css">
    <script src="../js/common.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/api.js"></script>
</head>

<body>

    <div id="yoho-header">
        <div class="tool-wrap">
            <div class="center-content">
                <div class="tool-left">
                    <span class="iconfont icon-hamburgermenu"></span>
                    <a href="#">YOHO!BUY 有货</a>
                    <ul class="yoho-tool-list">
                        <li>
                            <a href="#" class="yoho-group" rel="nofollow" data-en="YOHO!" data-cn="集团官网">YOHO!</a>
                        </li>
                        <li>
                            <a href="#" class="yoho-group" rel="nofollow" data-en="YOHO!BOYS"
                                data-cn="男生潮流">YOHO!BOYS</a>
                        </li>
                        <li>
                            <a href="#" class="yoho-group" rel="nofollow" data-en="YOHO!GIRLS"
                                data-cn="女生潮流">YOHO!GIRLS</a>
                        </li>
                        <li>
                            <a href="#" class="yoho-group" rel="nofollow" data-en="Mars" data-cn="新鲜好去处">Mars</a>
                        </li>
                        <li>
                            <a href="#" class="yoho-group" rel="nofollow" data-en="YO'HOOD" data-cn="潮流嘉年华">YO'HOOD</a>
                        </li>
                    </ul>
                </div>
                <div class="tool-swindle">
                    <span class="iconfont icon-note"></span>
                    <a href="#">关于防诈骗的重要提醒</a>
                </div>
                <div class="tool-right">
                    <span>Hi~</span>
                    <ul>
                        <li id="loginBox">
                            [
                            <a href="./login.html?returnCart=./goodsList.html" id="login">请登录</a>
                            ][
                            <a href="./register.html" id="reg">免费注册</a>
                            ]
                        </li>
                        <li>
                            <a href="#">MY有货</a>
                        </li>
                        <li>
                            <span class="iconfont icon-dingdan"></span>
                            <a href="#">我的订单</a>
                        </li>
                        <li>
                            <span class="iconfont icon-shoucang"></span>
                            <a href="#">我的收藏</a>
                        </li>
                        <li>
                            <span class="iconfont icon-icon-"></span>
                            <a href="#">消息</a>
                        </li>
                        <li>
                            <span class="iconfont icon-kefu"></span>
                            <a href="#">客服服务</a>
                        </li>
                        <li>
                            <span class="iconfont icon-weixin"></span>
                            <a href="#">关注有货</a>
                        </li>
                        <li>
                            <span class="iconfont icon-shouji"></span>
                            <a href="#">手机版</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

        <div class="head-wrap">
            <div class="login-center">
                <div class="login">
                </div>
                <div class="head-right">
                    <div id="search-from" class="clear">
                        <input type="text" class="search-box">
                        <button></button>
                    </div>
                    <div class="go-cart">
                        <span class="iconfont icon-tianchongxing-"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-wrap">
            <div class="nav-content">
                <ul class="nav">
                    <li><a href="#">新品到着</a></li>
                    <li><a href="#">品牌一览</a></li>
                    <li><a href="#">服饰</a></li>
                    <li><a href="#">鞋履</a></li>
                    <li><a href="#">包装</a></li>
                    <li><a href="#">配色·其他</a></li>
                    <li><a href="#">SALE</a></li>
                    <li><a href="#">证照/协议</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="goods-content">
        <div class="goods-head">
            <p>BOYS首页</p>
        </div>

        <div class="goodsList">

            <div class="goods-nav">
                <h3>全部品类</h3>
                <ul class="nav">
                    <li>
                        <h3>上衣</h3>
                        <ul class="sec-nav">

                        </ul>
                    </li>
                    <li>
                        <h3>裤装</h3>
                        <ul class="sec-nav">

                        </ul>
                    </li>
                    <li>
                        <h3>鞋靴</h3>
                        <ul class="sec-nav">

                        </ul>
                    </li>
                    <li>
                        <h3>裙装</h3>
                        <ul class="sec-nav">

                        </ul>
                    </li>
                    <li>
                        <h3>包类/装备</h3>
                        <ul class="sec-nav">

                        </ul>
                    </li>
                    <li>
                        <h3>服配</h3>
                        <ul class="sec-nav">

                        </ul>
                    </li>
                    <li>
                        <h3>创意生活</h3>
                        <ul class="sec-nav">

                        </ul>
                    </li>
                    <li>
                        <h3>有事</h3>
                        <ul class="sec-nav">

                        </ul>
                    </li>
                    <li>
                        <h3>有玩</h3>
                        <ul class="sec-nav">

                        </ul>
                    </li>
                    <li>
                        <h3>个人护理</h3>
                        <ul class="sec-nav">

                        </ul>
                    </li>
                </ul>
            </div>

            <div class="cont-right">
                <div class="filter-box">
                    <div class="brand">
                        <span class="title">品牌：</span>
                        <ul class="brandList">
                            <li class="attr ">
                                <a href="#" title="奇连数码">奇连数码</a>
                            </li>
                            <li class="attr ">
                                <a href="#" title="B+ by Beautyberry">B+ by Beautyberry</a>
                            </li>
                            <li class="attr ">
                                <a href="#" title="PINKORANGE">PINKORANGE</a>
                            </li>
                            <li class="attr ">
                                <a href="#" title="Genanx">Genanx</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="sort-pager">
                    <a class="sort-type" href="javascript:" data-type="id" data-order="asc">
                        默认
                    </a>
                    <a class="sort-type" href="javascript:" data-type="goodsPrice" data-order="asc">
                        价格
                    </a>
                    <a class="sort-type" href="javascript:" data-type="goodsPrice" data-order="asc">
                        升序↑
                    </a>
                    <a class="sort-type" href="javascript:" data-type="goodsPrice" data-order="desc">
                        降序↓
                    </a>
                    <div class="page">
                        <select>
                            <option value="20">20</option>
                            <option value="40">40</option>
                            <option value="60">60</option>
                        </select>
                        每页
                    </div>

                </div>

                <div class="goods-list-cont">
                    <ul>
                        <li>
                            <div class="goods">
                                <a href="#">
                                    <img src="http://img12.360buyimg.com/n1/jfs/t1/135739/20/10706/205803/5f6ac560Ea9acba58/e842b9698a26c8b1.jpg"
                                        alt="">
                                </a>
                                <p class="msg">稻草人（MEXICAN）短袖套装男2021春夏动漫印花t恤衫男潮流青少年夏天衣服套装男 白色 XL</p>
                                <p class="price">￥<span>99.00</span></p>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="pageBox">
                    <button class="prev">上一页</button>
                    <span class="pageTips">1/20</span>
                    <button class="next">上一页</button>
                </div>
            </div>
        </div>
    </div>

    <div class="yoho-footer">
        <div class="promise">
            <ul>
                <li>
                    <span class="iconfont icon-iconzhengpin"></span>
                    <span class=" red">100%</span>
                    <span class="rgbf">品牌正品</span>
                </li>
                <li>
                    <span class="icon-qitianwuliyoutuihuan iconfont"></span>
                    <span class=" red">7天</span>
                    <span class="rgbf">无理由退换货</span>
                </li>
                <li>
                    <span class="icon-liaotian iconfont"></span>
                    <a href="#">
                        <span class="red">便捷</span>
                        <span class="rgbf">在线客服</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer-help">
            <ul>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>

            </ul>
        </div>

        <div class="footer-link">
            <div class="link-left">
                <a href="#">
                    <img src="../img/link1.png" alt="">
                </a>
                <a href="#">
                    <img src="../img/link2.png" alt="">
                </a>
                <a href="#">
                    <img src="../img/link3.png" alt="">
                </a>

            </div>
            <p class="links">
                <a href="#" rel="nofollow">返回首页</a>
                <span>|</span>
                <a href="#" rel="nofollow">YOHO!BUY 有货</a>
                <span>|</span>
                <a href="#" rel="nofollow">新力传媒</a>
                <span>|</span>
                <a href="#" rel="nofollow">联系我们</a>
                <span>|</span>
                <a href="#" rel="nofollow">商家入驻</a>
                <span>|</span>
                <a href="#" rel="nofollow">隐私条款</a>
                <span>|</span>
                <a href="#" rel="nofollow">友情链接</a>
                <span>|</span>
                <a href="#">潮流品牌大全</a>
                <span>|</span>
                <a href="#">潮流品类大全</a>
                <span>|</span>
                <a href="#">潮流产品大全</a>
                <span>|</span>
                <a href="#">潮流资讯</a>
                <span>|</span>
                <a href="#">穿衣搭配(男生版)</a>
                <span>|</span>
                <a href="#">穿衣搭配(女生版)</a>
                <span>|</span>
                <a href="#">潮流人气</a>
                <span>|</span>
                <a href="#">潮流潮品</a>
                <span>|</span>
                <a href="#">潮流视频</a>
                <span>|</span>
                <a href="#">苏公网安备 32010502010132号</a>
                <span>|</span>
                <a target="_blank" href="#">出版物经营许可证</a>
                <span>|</span>
                <a target=" _blank" href="#">苏B2-20120395</a>
                <span>|</span>
                <a target=" _blank" href="#">食品经营许可证</a>
            </p>

            <p class="copyright">
                CopyRight © 2007-2021 南京新与力文化传播有限公司
                <a class="rbg6" href="#">苏ICP备09011225号</a>
                NewPower Co. 版权所有 江苏省南京市建邺区嘉陵江东街18号南京国家广告产业园5栋17，18楼 025-87781000
            </p>
        </div>
    </div>

    <div class="returnTop">
        ↑
    </div>

</body>

<script>

    $(function () {

        var key = decodeURIComponent(urlParse().key) == "undefined" ? "" : decodeURIComponent(urlParse().key);
        var orderCol = "id";
        var orderType = "asc";
        var pageNum = 1;
        var showNum = 20;
        var maxPage = 0;

        var lgc = getCookie("lgc");

        if (lgc) {
            $("#loginBox").html(`${lgc}<button class="quitBtn">退出</button>`).css("color", "red");
        }

        $(".icon-tianchongxing-").css({ cursor: "pointer" }).click(function () {
            location.href = "./cart.html";
        })

        $(".quitBtn").click(function () {
            quit();
        })

        function quit() {
            setCookie("lgc", "", -1);
            location.reload();
        }

        $(".goods-head").css({ cursor: "pointer" }).click(function () {
            location.href = "./index.html";
        })


        $(".next").click(function () {
            pageNum++;
            if (pageNum >= maxPage) {
                pageNum = maxPage;
            }
            loadGoods();
        })

        $(".prev").click(function () {
            pageNum--;
            if (pageNum <= 1) {
                pageNum = 1;
            }
            loadGoods();
        })

        $(".page select").change(function () {
            showNum = parseInt($(this).val());
            loadGoods();
        })

        loadGoods();
        async function loadGoods() {
            var { status, detail, list, total, maxPage: max } = await searchGoodsAllOrderLimit({ key, orderCol, orderType, pageNum, showNum })
            maxPage = max;
            if (status) {
                var html = ``;
                list.forEach(function (item) {
                    var { id, goodsId, goodsName, goodsImg, goodsPrice } = item;
                    html += `<li>
                            <div class="goods">
                                <a href="./goodsDetails.html?gid=${goodsId}">
                                    <img src="${goodsImg}" alt="">
                                </a>
                                <p class="msg">${goodsName}</p>
                                <p class="price">￥<span>${goodsPrice}</span></p>
                            </div>
                        </li> `
                })
                $(".goods-list-cont ul").html(html);
                pageNum = pageNum > maxPage ? maxPage : pageNum;
                $(".pageTips").text(`${pageNum}/${maxPage}`);
            }
        }

        $(".sort-type").click(function () {
            orderCol = $(this).attr("data-type");
            orderType = $(this).attr("data-order");
            loadGoods();
        })

        $("#search-from button").click(function () {
            key = $(".search-box").val();
            loadGoods();
        })

        $(window).scroll(function () {

            $(".returnTop").css("display", "block").click(function () {
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                })
            })
            if (window.scrollY <= 0) {
                $(".returnTop").css("display", "none")
            }
        })

    })



</script>

</html>